<template>

    <div class="upload-container"> 
        <PageHeader title="任务调度" />
        
        <div class="setting-buttons">
            <div class="setting-button" @click="DawnshowPopup">
                <van-icon name="clock-o" class="setting-icon" />
                <span class="setting-text">打卡任务设置</span>
                <van-icon name="arrow" class="arrow-icon" />
            </div>
            <van-popup v-model:show="Dawnshow" round position="top" :style="{ height: 'auto' }" >
                <DawnSeting :settings="dawnTaskSettings" @updata:setting="handleSettingUpdate" />
            </van-popup>

            <div class="setting-button" @click="LogshowPopup">
                <van-icon name="notes-o" class="setting-icon" />
                <span class="setting-text">日志任务设置</span>
                <van-icon name="arrow" class="arrow-icon" />
            </div>
            <van-popup v-model:show="Logshow" round position="top" :style="{ height: 'auto' }" >
                <LogSeting :settings="logTaskSettings" @updata:setting="handleSettingUpdate"/>
            </van-popup>
        </div>

        <template v-if="Object.keys(logTaskSettings).length > 0 && Object.keys(dawnTaskSettings).length > 0">
            <DawnJob @job-added="onJobAdded"/>
            <JobList ref="jobListRef"/>
        </template>

       
    </div>
    
</template>

<script setup>
import PageHeader from '@/Pages/compontents/PageHeader.vue';
import DawnJob from './compontents/DawnJob.vue'
import JobList from './compontents/JobList.vue'
import DawnSeting from './compontents/DawnSeting.vue'
import LogSeting from './compontents/LogSeting.vue'
import { ref, onMounted , defineEmits} from 'vue';
import request from '@/utils/request';
import apiUrls from '@/config/apiUrls';
import {
  showToast,
} from 'vant';


const jobListRef = ref(null)
function onJobAdded() {
  jobListRef.value && jobListRef.value.fetchJobList()
}
const dawnTaskSettings = ref({})
const logTaskSettings = ref({})

const Dawnshow = ref(false);
const DawnshowPopup = () => {
    Dawnshow.value = true;
};


const Logshow = ref(false);
const LogshowPopup = () => {
    Logshow.value = true;
};

const getDawnSettings = async () => {
    const response = await request.get(apiUrls.settings.dawnSetting);
    if (response.code === 200) {
        dawnTaskSettings.value = response.data;
    }else{
        showToast(response.message);
    }
}

const getLogSettings = async () => {
    const response = await request.get(apiUrls.settings.logSetting);
    if (response.code === 200) {
        logTaskSettings.value = response.data;
    }else{
        showToast(response.message);
    }
}

// 处理设置更新
const handleSettingUpdate = () => {
    getDawnSettings();
    getLogSettings();
};

onMounted(() => {
    getDawnSettings();
    getLogSettings();
})




</script>
<style scoped>
.upload-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.setting-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.setting-button {
    display: flex;
    align-items: center;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.setting-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.setting-icon {
    font-size: 20px;
    color: #1989fa;
    margin-right: 12px;
}

.setting-text {
    flex: 1;
    font-size: 15px;
    color: #323233;
    font-weight: 500;
}

.arrow-icon {
    font-size: 16px;
    color: #969799;
}

:deep(.van-popup) {
    border-radius: 16px 16px 0 0;
}
</style>